<template>
  <div>
    <el-row :gutter="10">
      <!--1各班学生人数-->
      <el-col :span="8">
        <el-card class="box-card1">
          <div class="title" style="font-size: 21px">Class Size</div>
          <div style="margin-top: 10px">
            <i class="ifemale"></i>Total：&nbsp;{{ total }}
          </div>
          <div class="parent">
            <div class="barCharts">
              <barCharts />
            </div>
          </div> 
          <div class="line"></div>
        </el-card>
      </el-col>
      <!--2男女比例-->
      <el-col :span="8">
        <el-card class="box-card2">
          <div class="title" style="font-size: 21px">Male-Female Ratio</div>
          <div class="message1 message">
            <i class="imale"></i>male：&nbsp;{{ genderNum.length>0?genderNum[0].value:'' }}人
          </div>
          <div class="message2 message">
            <i class="ifemale"></i>female：{{ genderNum.length>0?genderNum[1].value:'' }}人
          </div>
          <div class="pieCharts">
            <pieCharts :gender-ratio="genderRatio" />
          </div>
        </el-card>
      </el-col>
      <!-- 3天气插件 -->
      <el-col :span="8">
        <el-card class="weather">
          <iframe
            width="100%"
            height="100%"
            scrolling="no"
            frameborder="0"
            allowtransparency="true"
            src="https://i.tianqi.com?c=code&id=21&icon=1&py=taiyuan&site=12"
          ></iframe>
        </el-card>
      </el-col>
    </el-row>
    <!--地图展示-->
    <div class="map">
      <el-card class="box-card map-style-card">
        <map-charts class="map-style" />
      </el-card>
    </div>
  </div>
</template>

<script>
import Detail from "./Detail/index.vue";
import pieCharts from "./pieCharts/index.vue";
import barCharts from "./barCharts/index.vue";
import mapCharts from "@/views/dashboard/Card/mapCharts";
import studentApi from "@/api/student";
import dayjs from "dayjs";


export default {
  name: "Card",
  components: { Detail, pieCharts, barCharts, mapCharts },
  data() {
    return {
      isShow: false,
      genderRatio: [],
      genderNum: [
      ],
    };
  },
  computed: {
    // 计算今天日期
    today() {
      return dayjs().format("MM-DD");
    },
    // 从vuex中获取班级总人数
    total() {
      return this.$store.getters["classL/total"].toString();
    },
   
  },
  beforeMount() {
    // 获取男女比例
    this.getGenderRatio();
    // 获取今天登录数据
    // this.getLoginData();
  },
  methods: {
    // 获取男女比例和人数
    getGenderRatio() {
      studentApi.getGenderRatio().then((res) => {
        this.genderRatio = res.data;
        this.genderNum = res.genderNum;
      });
    },
  },
};
</script>

<style scoped>
#percentList {
  width: 200px;
  height: 200px;
  text-align: center;
  background-color: rgb(211, 211, 211);
  position: absolute;
  z-index: 1;
}
.login-info {
  cursor: pointer;
}

.map {
  width: 100%;
  height: 700px;
  padding-bottom: 20px;
  margin-top: 8px;
}

.map-style {
  width: 100%;
  height: 710px;
}

.map-style-card {
  width: 100%;
  height: 750px;
}
::v-deep .el-card__body {
  height: 200px;
}
::v-deep .pieCharts {
  width: 250px;
  height: 150px;
  position: relative;
  display: inline-block;
  left: 220px;
  bottom: 10px;
}
.message1 {
  margin-top: 40px;
}
.message2 {
  margin-top: 70px;
}
.message {
  position: absolute;
}
.imale {
  background-color: rgba(61, 151, 221, 0.5);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-right: 5px;
}
.ifemale {
  background-color: rgb(88, 108, 177);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-right: 5px;
}

::v-deep .barCharts {
  width: 450px;
  height: 100px;
  display: inline-block;
  margin-top: 10px;
}
.line {
  position: relative;
}
.line:before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: rgb(129, 137, 153);
  position: absolute;
  top: -4px;
  transform: translateY(-50%);
}
.parent {
  text-align: center;
}

::v-deep .weather > .el-card__body {
  padding: 0;
}
</style>
